<template>
	<view class="content">
		<view class="content_image">
			<!-- 去掉了背景可更换  @click="changImg"-->
			<image src="http://www.cctvwenhua.tv/wp-content/uploads/2023/02/%E6%80%BB%E8%A7%86%E8%A7%89-11-350x200.jpg"
				mode="aspectFill"></image>
		</view>
		<!-- 内容 -->
		<view class="content_botton">
			<view class="content_info" v-if="userinfo">
				<!-- <image :src="userinfo.avatarUrl" mode=""></image> -->
				<u-avatar class="album__avatar" :text="userinfo.nickName.substring(0,1)" fontSize="50" randomBgColor
					style="width: 100rpx;height: 100rpx;"></u-avatar>

				<view class="username">
					{{userinfo.nickName}}
				</view>
				<!-- 昵称下的两个东西 -->
				<view class="select">
					<view></view>
					<view></view>
				</view>
			</view>
			<view v-else class="noLogin">
				<image src="../../static/images/my/weixin.png" mode="widthFix" @click="toLogin()"></image>
				<view class="">点我登陆</view>
			</view>
			<!--  -->
			<view class="my_order">
				<view class="my_order_title">
					个人中心
				</view>
				<view class="my_order_item" v-for="item in list">
					<view class="my_order_content">
						<!-- 循环菜单 图片包文字跳转 -->
						<image :src="item.url" mode="widthFix" @click="infoCase(item.id)">
							<view class="">{{item.name}}</view>
						</image>
					</view>
				</view>
			</view>
			<!--  -->
			<view class="other">
				<view class="other_our" @click="callUs()">
					<view>联系我们</view>
					<image src="../../static/images/my/right.png" mode="widthFix"></image>
				</view>
				<view class="other_addres" @click="logout()" v-if="userinfo">
					<view>退出登陆</view>
					<image src="../../static/images/my/right.png" mode="widthFix"></image>
				</view>
				<view class="other_addres" @click="toLogin()" v-if="! userinfo">
					<view>立即登录</view>
					<image src="../../static/images/my/right.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import vote from '@/util/vote.js'
	import api from "@/util/api.js"
	export default {
		data() {
			return {
				list: [{
						id: 1,
						url: '../../static/images/my/my.png',
						name: "我的发布"
					},
					{
						id: 2,
						url: '../../static/images/my/witPay.png',
						name: "待付款"
					},
					{
						id: 3,
						url: '../../static/images/my/fankui.png',
						name: "反馈"
					},
					{
						id: 4,
						url: '../../static/images/my/more.png',
						name: "更多"
					}
				],
				url: 'http://www.cctvwenhua.tv/wp-content/uploads/2023/02/%E6%80%BB%E8%A7%86%E8%A7%89-11-350x200.jpg',
				userinfo: [],
				collectNum: 0
			}
		},
		onShow() {
			this.userinfo = uni.getStorageSync('userInfo')
			console.log("userinfo", this.userinfo);

			let collect = uni.getStorageSync('collect')
			this.collectNum = collect.length;
		},
		methods: {
			// 更换上方背景图
			changImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(JSON.stringify(res.tempFilePaths))
						uni.setStorageSync('url', res.tempFilePaths[0])
					}
				});
				this.onShow()
				uni.usei
			},
			login() {
				var that = this
				// #ifdef MP-WEIXIN
				wx.getUserProfile({
					desc: '用于完善会员资料', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
					success: (res) => {
						console.log(res)
						that.userinfo = res.userInfo
						wx.setStorageSync('user', res.userInfo);
					}
				})
				// #endif

			},
			// 退出登录
			logout() {
				uni.showModal({
					title: "温馨提示",
					content: "确定要退出登陆吗？",
					success: function(res) {
						if (res.confirm) {
							// 用户点击了确定按钮
							uni.clearStorageSync("token");

							//跳转
							uni.reLaunch({
								url: "/pages/login/login"
							})
						} else if (res.cancel) {
							// 用户点击了取消按钮
							console.log("取消");

						}
					}
				})

			},
			// 不知道跳转到哪里
			myCollect() {
				// 页面跳转
				uni.navigateTo({
					url: '/pages/rankingList/videoInfo/videoInfo'
				})
			},
			// 联系我们
			callUs() {
				// 弹窗
				vote.showAlert("温馨提示", "请发送信息至邮箱:cvntv@163.com")
			},
			// 跳转登录
			toLogin() {
				this.$u.route('/pages/login/login');
			},
			// 个人中心选项跳转
			infoCase(id) {
				switch (id) {
					case 1:
						// tiaozhuan页面
						this.myCollect();
						break;
					case 2:
						console.log('待付款');
						vote.showAlert("温馨提示", "开发中...")
						break;
					case 3:
						console.log('待付款', id);
						uni.redirectTo({
							url: "/pages/user/fankui/fankui"
						})

						break;
					default:
						console.log('更多');
						vote.showAlert("温馨提示", "敬请期待")
						break;
				}
			}
			// 其他的

		}
	}
</script>

<style lang="scss">
	page {
		background-color: #eee;
	}

	.content {
		/* 背景图 */
		background: url("@/static/images/banner/banner_baoming.jpg");
		/* or repeat-y */
		background-repeat: repeat;
		height: 100vh;
	}

	.content_image {
		image {
			// 高斯模糊
			filter: blur(3rpx);
			width: 100%;
		}

		height: 300rpx;
		position: relative;
	}

	.content_botton {
		opacity: 0.94;
		/* 设置透明度为 50% */

		.noLogin {
			position: absolute;
			left: 45%;
			transform: translate(-50%);
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;
			justify-content: center;
			align-items: center;
			position: relative;

			image {
				width: 100rpx;
				height: 100rpx;
			}
		}

		.content_info {
			position: relative;
			z-index: 999;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-around;
			margin-top: 15%;
			margin-left: 5%;
			border-radius: 20rpx;
			width: 90%;
			height: 250rpx;
			background-color: #fff;

			image {
				margin-top: -40rpx;
				width: 130rpx;
				height: 130rpx;
				border-radius: 50%;
			}


			.username {}

			.select {
				display: flex;
				justify-content: space-between;

				view {
					padding: 0 40rpx;
				}
			}
		}

		.my_order {
			width: 90%;
			margin-top: 10rpx;
			margin-left: 5%;
			height: 280rpx;
			border-radius: 20rpx;
			background-color: #fff;


			.my_order_title {
				border-radius: 20rpx;
				padding-left: 20rpx;
				line-height: 80rpx;
				height: 80rpx;

			}

			.my_order_item {
				padding: 4.5%;
				float: left;

				.my_order_content {
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: space-between;

					image {
						width: 80rpx;
						height: 50rpx;
					}
				}
			}
		}
	}

	.other {
		margin: 10rpx 40rpx;
		height: 190rpx;
		width: 90%;
		border-radius: 20rpx;
		background-color: #fff;

		.other_addres {
			height: 60rpx;
			padding: 20rpx 20rpx;
			border-bottom: 1rpx dashed gainsboro;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}

		.other_our {
			height: 60rpx;
			padding: 20rpx 20rpx;
			display: flex;
			justify-content: space-between;

			image {
				width: 50rpx;
			}
		}
	}
</style>